<template>
  <div class="chart-content">
    <div class="chart-header">
      <RadioGroup v-model:value="timeType" size="small">
        <RadioButton value="today">今日</RadioButton>
        <RadioButton value="week">本周</RadioButton>
        <RadioButton value="month">本月</RadioButton>
      </RadioGroup>
    </div>
    <div class="chart-body">
      <BaseChart :options="chartOptions" height="300px" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import BaseChart from './BaseChart.vue'
import { RadioGroup,RadioButton } from 'ant-design-vue'
import type { EChartsOption } from 'echarts'

const timeType = ref('today')

const chartOptions = computed<EChartsOption>(() => ({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    right: 10,
    top: 'center',
    data: ['内科', '外科', '儿科', '妇产科', '眼科', '其他']
  },
  graphic: [{
    type: 'group',
    left: 'center',
    top: 'middle',
    children: [
      {
        type: 'text',
        style: {
          text: '2,234',
          textAlign: 'center',
          font: 'bold 28px sans-serif',
          fill: '#1f2937'
        },
        left: 'center',
        top: '35%'
      },
      {
        type: 'text',
        style: {
          textAlign: 'center',
          font: '14px sans-serif',
          fill: '#6b7280'
        },
        left: 'center',
        top: '65%'
      }
    ]
  }],
  series: [
    {
      name: '就诊分布',
      type: 'pie',
      radius: ['45%', '65%'],
      center: ['50%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '16',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 335, name: '内科' },
        { value: 310, name: '外科' },
        { value: 234, name: '儿科' },
        { value: 135, name: '妇产科' },
        { value: 148, name: '眼科' },
        { value: 158, name: '其他' }
      ]
    }
  ]
}))
</script>

<style scoped lang="less">
.chart-content {
  height: 100%;
  display: flex;
  flex-direction: column;

  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;

    .chart-title {
      h3 {
        font-size: 1rem;
        font-weight: 500;
        color: #1f2937;
        margin: 0;
      }

      .subtitle {
        font-size: 0.875rem;
        color: #6b7280;
      }
    }
  }

  .chart-body {
    flex: 1;
    position: relative;
    min-height: 300px;
  }
}
</style> 